<template>
  <section class="series-tv">
    <div class="series-tv_title" @click="toggle">
      <span class="more">全部  <i class="icon-show-more_tv" :class="{ active: !onStart }"></i></span>选集
    </div>
    <ul class="series-tv_list">
      <li v-for="item in episodeList"><a :class="{ active: item===cur }">{{item}}</a></li>
      <a href="http://a.app.qq.com/o/simple.jsp?pkgname=com.snailvr.manager&ckey=CK1340670182054" class="series-tv-mask"></a>
    </ul>
  </section>
</template>
<script>
  export default {
    props: {
      media: {
        type: Object,
        default: {}
      }
    },
    data () {
      return {
        episodeList: [],
        onStart: true
      };
    },
    created () {
      this.total = Math.floor(this.media.totalEpisode);
      this.cur = Math.floor(this.media.curEpisode);
      this.showPart();
    },
    methods: {
      toggle () {
        if (this.onStart) {
          this.showTotal();
          this.onStart = false;
        } else {
          this.showPart();
          this.onStart = true;
        }
      },
      showTotal () {
        const len = this.total;
        this.episodeList.length = 0;
        let i = 0;
        for (i; i < len; i++) {
          this.episodeList[i] = i + 1;
        }
      },
      showPart () {
        const len = this.total > 7 ? 7 : this.total;
        this.episodeList.length = 0;
        let i = 0;
        for (i; i < len; i++) {
          this.episodeList[i] = i + 1;
        }
      }
    }
  };
</script>
<style lang="scss" scoped>
  @import "~common/style/variables";
  .series-tv {
    margin-top: .3rem;
    background: #fff;
  }
  .series-tv_list {
    @extend %flex;
    position: relative;
    flex-wrap: wrap;
    border-top: 1px solid rgba(153, 153, 153, .6);
    li {
      flex:0 1 14.2857%;
      padding-top: 14.2857%;
      position: relative;
      align-items: center;
      font-size: .36rem;
      color: $font-color4;
      a {
        @extend %flex;
        color: $font-color4;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        align-items: center;
        justify-content: center;
        background: transparent;
        border: 1px solid $border-color11;
        border-width: 0 1px 1px 0;
        &.active {
          color: $theme-color;
          background: #fafafa;
        }
      }
    }
  }
  .series-tv_title {
    @include font-color(20%);
    padding: .4rem .45rem;
    font-size: .48rem;
    .more {
      float: right;
      display: inline-block;
      padding-top: .15rem;
      font-size: .36rem;
      color: $font-color5;
    }
  }
  .icon-show-more_tv {
    display: inline-block;
    width: .26rem;
    height: .16rem;
    background-image: url('~common/images/show_more_tv.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    vertical-align: middle;
    &.active {
      background-image: url('~common/images/hide_more_tv.png');
    }
  }
  .series-tv-mask {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
  }
</style>
